/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
<view class="live">
  <view class="live-header" @click="upLoadImg">
    <view class="cover">
      <image v-if="coverImg" mode="widthFix" :src="coverImg"/>
      <i class="iconfont" v-else>&#xe67f;</i>
    </view>
  </view>
  <view class="live-body">

    <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange"
                  @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="getNavList?getNavList:[]">
    </mpvue-picker>

    <view class="form_items">
      <view class="items_left">
        {{ $t('直播标题') }}
      </view>
      <input class="items_input" v-model="liveTitle" type="text" :placeholder="$t('请输入直播标题')" maxlength="11">
    </view>
    <view class="form_items">
      <view class="items_left">
        {{ $t('直播描述') }}
      </view>
      <input class="items_input" v-model="liveDescription" type="text" :placeholder="$t('请输入直播描述')"
             maxlength="11">
    </view>
  </view>
  <view class="live-btn" hover-class="text-hover" @click="toLive(false)">{{ $t('发起直播') }}</view>
</view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'

export default {
  data() {
    return {
      navList: [],
      mode: 'selector',
      chooseList: [],
      index: 0,
      coverImg: '',
      chooseType: {},
      liveTitle: '',
      liveDescription: '',
      cover: '',
      pickerValueDefault: [0],
      isPlay: false,
      switchCameraStatus: false,
      messageRecords: []
    }
  },
  components: {
    mpvuePicker
  },
  onLoad() {
    if (uni.getStorageSync('coverImg') != '') {
      this.coverImg = uni.getStorageSync('coverImg')
      this.cover = uni.getStorageSync('cover')
    }

    uni.$on('RE_LIVE', ({isPlay, switchCameraStatus, messageRecords}) => {

      let isOnLivePushPage = getCurrentPages().map(item => item.route).includes('platforms/mp-weixin/live-pusher');
      if (isOnLivePushPage) {
        this.isPlay = isPlay;
        this.switchCameraStatus = switchCameraStatus;
        console.log('messageRecords 緩存的消息記錄', messageRecords)
        uni.setStorageSync('LiveMessageRecords', messageRecords);
        console.log('重新進入一下直播間');
        uni.showLoading({
          title: '正在恢复直播'
        })
        this.toLive(true);
      }

    })
  },
  computed: {
    getNavList() {
      return this.navList.map(res => ({
        label: res.type_name,
        value: res.id
      }))
    }
  },
  methods: {

    showPicker() {
      this.$refs.mpvuePicker.show();
    },

    toLive(isRe = false) {
      if (!this.coverImg) {
        return this.$toast(this.$t('请上传直播封面图'))
      }

      if (!this.liveTitle) {
        return this.$toast(this.$t('请填写直播间标题'))
      }
      this.$http.launchlive({
        cover: this.cover,
        title: this.liveTitle,
        description: this.liveDescription
      }).then(res => {
        if (res.status === 200) {
          uni.setStorageSync('coverImg', this.coverImg)
          uni.setStorageSync('cover', this.coverImg)
          uni.setStorage({
            key: 'pushUrl',
            data: res.data,
            success: () => {
              let url = `/platforms/mp-weixin/live-pusher?cover${this.cover}&title=${this.title}&description=${this.description}`;
              if (isRe) {
                url = url + '&re=1'
              } else {
                uni.setStorageSync('LiveMessageRecords', []);
              }
              if (this.isPlay) {
                url = url + '&isPlay=1'
              }
              if (this.switchCameraStatus) {
                url = url + '&switchCameraStatus=1'
              }
              url = url + `&url=${res.data}`;
              this.getnav(url)
            }
          });

        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        uni.hideLoading();
      })
    },
    onConfirm(e) {
      this.chooseType = e
      this.index = e.index[0]

    },
    onChange(e) {
      this.chooseType = e
    },
    onCancel(e) {
      console.log(e);
    },
    upLoadImg() {
      const formData = this.$http.returnCommonParams('api/Common/uploadPic', 'live')
      $utils.chooseImg().then(res => {
        this.$loading(this.$t('上传中'))
        uni.uploadFile({
          url: this.$baseUrl + 'api/Common/uploadPic',
          filePath: res.tempFilePaths[0],
          name: 'file',
          formData: formData,
          success: res => {

            const data = JSON.parse(res.data)
            if (data.status === 200) {
              this.coverImg = data.data.full_path
              this.cover = data.data.path
              this.$hideLoading()
            } else {
              this.$toast(data.mess)
            }
          },
          fail: err => {
            this.$hideLoading()
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pickerWrap {
  background: #fff;
}

.form_items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24rpx;
  background: #fff;
  height: 104rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;

}

.items_input {
  margin-left: 30rpx;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  color: #333;
  font-size: 30rpx;
  border-bottom: 16rpx solid #f4f4f4;
  background: #fff;
  margin-top: 14rpx;

  .cover {
    position: relative;
    margin: 0 auto;
    min-height: 328rpx;

    image {
      width: 400rpx;

    }

    i {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      color: #FCCB59;
      font-size: 144rpx;
      transform: translate(-50%, -50%);
    }

  }
}

.live-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 104rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #eee;
  background: #fff;

  .right {
    color: #999;
  }
}

.live-content {
  margin-top: 40rpx;

  .live-content__item {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    padding-left: 24rpx;
    color: #999;
    font-size: 24rpx;

    image {
      width: 23rpx;
      height: 23rpx;
      margin-right: 8rpx;
    }
  }
}

.live-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(to left, #ff0c0c, #ff5c5c);
  color: #ffffff;
  width: 70%;
  border-radius: 200rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  box-shadow: 0 0 10px #ff5c5c;
  font-size: 38rpx;
}
</style>
